import React, { memo } from 'react';
import { Avatar } from 'antd';
import Pre from '@/components/Pre';
import { WebAudio } from '@/molecules';
import styles from './index.less';

const TalkConclusion = memo(({ data = {}, conclusionStatus, ...rest }) => {
    const { interviewSummary = {}, recordUrl = '' } = data;
    const { createUserInfo = {}, summary } = interviewSummary;
    return (
        <div className={!conclusionStatus || recordUrl ? styles.conclusionWrap : ''} {...rest}>
            {!conclusionStatus && (
                <>
                    <div className={styles.conclusionTitle}>面谈总结：</div>
                    <div className={styles.commentItem} style={{ paddingBottom: recordUrl ? 0 : 16 }}>
                        <div>
                            <Avatar icon="user" src={createUserInfo?.avatar} size={24} style={{ flex: '0 0 80px' }} />
                        </div>
                        <div className={styles.commentItemRight}>
                            <div className={styles.nameWrap}>
                                <span className={styles.name}>{createUserInfo?.employeeName}</span>
                            </div>
                            <div className={styles.cont}>
                                <Pre>{summary}</Pre>
                            </div>
                        </div>
                    </div>
                </>
            )}
            {!!recordUrl && (
                <div className={styles.questionItem}>
                    <div className={styles.voice}>
                        面谈录音：
                        <div>
                            <WebAudio
                                src={recordUrl}
                                controls="controls"
                                style={{ height: '30px', margin: '15px 0' }}
                            />
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
});
export default TalkConclusion;
